import React from "react";
import { Box, Link, Text } from "@chakra-ui/react";
import { Form, Input, Button, Checkbox, message } from "antd";
import {
  UserOutlined,
  LockOutlined,
  WechatFilled,
  WeiboCircleFilled,
  QqCircleFilled,
} from "@ant-design/icons";
import styles from "./index.module.css";
import classnames from "classnames";
import { withRouter } from "react-router-dom";
import { loginApi } from "../../services/index";
function Login(props) {
  console.log(props);
  const onFinish = async (values) => {
    console.log("Received values of form: ", values);
    const res = await loginApi({
      user: {
        ...values,
      },
    });
    console.log(res);
    if (res.data.code === 200) {
      message.success("登录成功");
      sessionStorage.setItem("token", res.data.data.token);
      setTimeout(() => {
        props.history.push("/home");
      }, 1000);
    }
  };

  const goToRegister = () => {
    const { history } = props;
    history.push("/register");
  };

  return (
    <Box w="100%" h="100%" bg="#f1f1f1">
      <Box
        position="fixed"
        w="400px"
        h="500px"
        boxShadow="0 0 8px rgba(0,0,0,.1)"
        left="0"
        right="0"
        top="0"
        bottom="0"
        margin="auto"
        boxSizing="border-box"
        padding="40px 40px 30px"
        bg="#fff"
      >
        <Box as="h4" margin="0 auto 50px" fontWeight="400" color="#969696">
          <Box
            fontSize="18px"
            display="flex"
            justifyContent="center"
            alignItems="center"
          >
            <Link
              fontWeight="700"
              color="lagou.100"
              borderBottom="2px solid #fff"
              borderBottomColor="lagou.100"
              textDecoration="none"
              padding="10px"
            >
              登录
            </Link>
            <Text as="b" padding="10px">
              ·
            </Text>
            <Link color="#969696" padding="10px" onClick={goToRegister}>
              注册
            </Link>
          </Box>
        </Box>
        <Box w="300px" h="320px">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              className={classnames({
                [styles.lagou_form_item]: true,
              })}
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名",
                },
              ]}
            >
              <Input
                className={classnames({
                  [styles.lagou_input]: true,
                  [styles.lagou_input_username]: true,
                })}
                prefix={<UserOutlined />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              style={{ marginBottom: "10px" }}
              name="password"
              rules={[{ required: true, message: "请输入密码!" }]}
            >
              <Input
                className={classnames({
                  [styles.lagou_input]: true,
                })}
                prefix={<LockOutlined />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item style={{ marginBottom: "10px" }}>
              <Box style={{ display: "flex", justifyContent: "space-between" }}>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox style={{ color: "#969696" }}>记住我</Checkbox>
                </Form.Item>

                <Link style={{ color: "#969696" }} href="">
                  登录遇到问题?
                </Link>
              </Box>
            </Form.Item>
            <Form.Item>
              <Button
                htmlType="submit"
                type="primary"
                style={{
                  background: "#3194d0",
                  width: "300px",
                  height: "44px",
                  borderRadius: "22px",
                  fontSize: "20px",
                }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          <Box marginTop="30px">
            <Box
              position="relative"
              color="#b5b5b5"
              margin="0 0 10px"
              fontSize="12px"
              textAlign="center"
              className={classnames({
                [styles.lagou_line]: true,
              })}
            >
              社交账号登录
            </Box>
          </Box>
          <Box
            marginTop="10px"
            display="flex"
            justifyContent="space-evenly"
            alignItems="center"
          >
            <WeiboCircleFilled
              style={{
                fontSize: "30px",
                color: "#E05244",
                cursor: "pointer",
              }}
            />
            <WechatFilled
              style={{
                fontSize: "30px",
                color: "#00BB29",
                cursor: "pointer",
              }}
            />
            <QqCircleFilled
              style={{
                fontSize: "30px",
                color: "#498AD5",
                cursor: "pointer",
              }}
            />
          </Box>
        </Box>
      </Box>
    </Box>
  );
}
export default withRouter(Login);
